<template>
	<view>
		<view class="load-modal load" :class="showShadow?'load-shadow':''" v-if="loadShow">
			<image :src="imgUrl" mode="aspectFill"></image>
			<view>{{text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			loadShow:{
				type:Boolean,
				default:false,
				required:true
			},
			imgUrl:{
				type:String,
				default:'../static/loading.gif '
			},
			text:{
				type:String,
				default:'加载中...'
			},
			overtime:{
				type:Number,
				default:12000
			},
			showShadow:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				timeoutID:''
			};
		},
		watch:{
			loadShow:function(newVal,oldVal){
				const that = this
				if(newVal === true){
				 	that.timeoutID = setTimeout(function(){
						this.$emit('update:loadShow',false)
						uni.showToast({
							title:'请求超时,请稍后再试!',
							icon:'none'
						})
					},that.overtime)
				}else{
					clearTimeout(that.timeoutID)
				}
			}
		},
	}
</script>

<style>
.load.load-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 140upx;
	left: 0;
	margin: auto;
	width: 160upx;
	height: 160upx;
	background-color: rgba(255,255,255,1);
	border-radius: 10upx;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	font-size: 28upx;
	z-index: 9999;
	line-height: 2.4em;
	overflow: hidden;
}
.load.load-modal image {
	width: 80upx;
	height: 80upx;
}
.load.load-modal view {
	font-size: 20upx;
	line-height: 20upx;
}
.load-shadow{
	/* 蒙版 */
	box-shadow: 0 0 0upx 2000upx rgba(0, 0, 0, 0.5);
}
</style>
